<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';
  import LedgerDetailModal from '/@/components/equipment-ledger-management/detail-modal.vue';

  const columns = [
    { title: '设备名称', dataIndex: 'name', key: 'name', width: 90, align: 'center' },
    { title: '设备编号', dataIndex: 'number', key: 'number', align: 'center' },
    { title: '安装位置', dataIndex: 'location', key: 'location', align: 'center' },
    { title: '运行状态', dataIndex: 'status', key: 'status', align: 'center' },
    { title: '操作', dataIndex: 'operation', key: 'operation', align: 'center' },
  ];

  const tableData = ref([
    {
      name: '设备1',
      number: 'S00001',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备2',
      number: 'S00002',
      location: '北区',
      status: '故障',
    },
    {
      name: '设备3',
      number: 'S00003',
      location: '北区',
      status: '停止',
    },
    {
      name: '设备4',
      number: 'S00004',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备5',
      number: 'S00005',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备6',
      number: 'S00006',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备7',
      number: 'S00007',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备8',
      number: 'S00008',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备9',
      number: 'S00009',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备10',
      number: 'S00010',
      location: '北区',
      status: '运行',
    },
    {
      name: '设备11',
      number: 'S00011',
      location: '北区',
      status: '运行',
    },
  ]);

  const ledgerDetailModal = ref();

  function showDetail(row) {
    ledgerDetailModal.value.showModal();
  }
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-card title="设备台账列表">
          <div class="operation">
            <a-button type="primary">新增设备</a-button>
            <a-button type="primary">修改设备</a-button>
            <a-button type="primary" danger>删除设备</a-button>
          </div>

          <a-table :columns="columns" :data-source="tableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-button type="primary" @click="showDetail(record)">设备详情</a-button>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <LedgerDetailModal ref="ledgerDetailModal" @refresh="" />
  </div>
</template>

<style scoped>
  .ant-card {
    width: 100%;
    min-height: 1000px;
  }
  .operation {
    margin: 0 0 10px 0;
    button {
      margin: 0 10px;
    }
  }
</style>
